<template>
	<view class="score-mall">
		<!-- 积分余额展示 -->
		<view class="score-header">
			<view class="score-balance">
				<text class="label">我的积分</text>
				<text class="value">{{userScore}}</text>
			</view>
			<view class="score-rules" @click="goToRules">
				<text>积分规则</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
		</view>
		
		<!-- 商品分类 -->
		<scroll-view scroll-x class="category-scroll">
			<view class="category-list">
				<view 
					class="category-item" 
					:class="{ active: currentCategory === item.id }"
					v-for="item in categories" 
					:key="item.id"
					@click="changeCategory(item.id)"
				>
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		
		<!-- 商品列表 -->
		<scroll-view 
			scroll-y 
			class="goods-scroll"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="goods-list">
				<view class="goods-item" v-for="item in goodsList" :key="item.id" @click="goToDetail(item.id)">
					<image :src="item.image" mode="aspectFill" class="goods-image"></image>
					<view class="goods-info">
						<text class="goods-name">{{item.name}}</text>
						<view class="goods-score">
							<text class="score">{{item.score}}</text>
							<text class="unit">积分</text>
						</view>
						<view class="goods-stock">
							<text>库存: {{item.stock}}</text>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadMoreStatus"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { usePage } from '/common/page'

// 用户积分
const userScore = ref(0)

// 分类数据
const categories = ref([
	{ id: 0, name: '全部' },
	{ id: 1, name: '火锅食材' },
	{ id: 2, name: '优惠券' },
	{ id: 3, name: '周边商品' }
])
const currentCategory = ref(0)

// 商品列表数据
const searchObject = ref({
	page: 1,
	size: 10,
	categoryId: 0
})

const {
	pageData: goodsList,
	status: loadMoreStatus,
	totalPage,
	initData,
	loadMore,
	isRefreshing,
	onRefresh
} = usePage('/score-mall/goods/list', searchObject)

// 切换分类
const changeCategory = (categoryId) => {
	currentCategory.value = categoryId
	searchObject.value.categoryId = categoryId
	searchObject.value.page = 1
	initData()
}

// 跳转到商品详情
const goToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/score-mall/detail?id=${id}`
	})
}

// 跳转到积分规则
const goToRules = () => {
	uni.navigateTo({
		url: '/pages/score-mall/rules'
	})
}

// 获取用户积分
const getUserScore = async () => {
	try {
		const res = await uni.request({
			url: '/api/user/score',
			method: 'GET'
		})
		userScore.value = res.data.score
	} catch (e) {
		console.error('获取用户积分失败', e)
	}
}

onMounted(() => {
	getUserScore()
	initData()
})
</script>

<style lang="scss">
.score-mall {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.score-header {
		background-color: #ff4d4f;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.score-balance {
			.label {
				color: #fff;
				font-size: 14px;
				margin-right: 10px;
			}
			
			.value {
				color: #fff;
				font-size: 24px;
				font-weight: bold;
			}
		}
		
		.score-rules {
			color: #fff;
			font-size: 14px;
			display: flex;
			align-items: center;
		}
	}
	
	.category-scroll {
		background-color: #fff;
		white-space: nowrap;
		padding: 10px 0;
		
		.category-list {
			display: inline-block;
			padding: 0 15px;
			
			.category-item {
				display: inline-block;
				padding: 5px 15px;
				margin: 0 5px;
				font-size: 14px;
				color: #666;
				background-color: #f5f5f5;
				border-radius: 15px;
				
				&.active {
					color: #fff;
					background-color: #ff4d4f;
				}
			}
		}
	}
	
	.goods-scroll {
		height: calc(100vh - 180px);
		
		.goods-list {
			padding: 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.goods-item {
				width: 48%;
				background-color: #fff;
				border-radius: 8px;
				margin-bottom: 10px;
				overflow: hidden;
				
				.goods-image {
					width: 100%;
					height: 150px;
				}
				
				.goods-info {
					padding: 10px;
					
					.goods-name {
						font-size: 14px;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					
					.goods-score {
						margin-top: 5px;
						
						.score {
							color: #ff4d4f;
							font-size: 16px;
							font-weight: bold;
						}
						
						.unit {
							color: #999;
							font-size: 12px;
							margin-left: 2px;
						}
					}
					
					.goods-stock {
						margin-top: 5px;
						color: #999;
						font-size: 12px;
					}
				}
			}
		}
	}
}
</style> 